<template>
  <div class="shop-r-form">
    <h2 class="pancel-title panel-5 flex v-align-c">
      <span></span>
      <i>视频</i>
    </h2>
    <h3 class="pancel-s-title">视频设置</h3>
    <el-form class="pad-t-15 pad-l-25 pad-r-25 form-diy">
      <div class="border-box near-box">
        <h4>视频样式</h4>
        <div class="mar-t--5 mar-b--15">
          <el-form-item>
            <div class="font-14">
              <el-row>
                <el-col :span="8">
                  <el-radio v-model="details.video.videoStyle" label="1">16:9</el-radio>
                </el-col>
                <el-col :span="8">
                  <el-radio v-model="details.video.videoStyle" label="2">4:3</el-radio>
                </el-col>
                <el-col :span="8">
                  <el-radio v-model="details.video.videoStyle" label="3">1:1</el-radio>
                </el-col>
              </el-row>
            </div>            
          </el-form-item>
        </div>
      </div>
      <div class="border-box near-box">
        <h4>上传视频</h4>
        <el-form-item>
          <div class="mar-t-2 mar-b-15 video-upload-btn">
            <el-upload class="avatar-uploader"
            action="https://up-z0.qiniup.com/"
            accept="image/mp4"
            list-type="picture-card-s"
            :before-upload="beforeUpload" name="file"
            v-loading="fileLoading"
            :data="qiniuToken" :show-file-list="false" :on-success="handleUploadSuccess">
              <span v-if="details.video.videoName" class="font-14 font-blue">{{ details.video.videoName }}</span>
              <div v-else class="default-v-upload">
                <i class="el-icon-plus"></i>
              </div>
            </el-upload>
          </div>
        </el-form-item>
      </div>
      <div class="border-box">
        <h4>视频封面</h4>
        <el-form-item>
          <div class="mar-t-2 mar-b--10">
            <el-upload class="avatar-uploader"
            action="/api/common/uploadFiles"
            accept="image/jpeg,image/gif,image/png,image/bmp"
            list-type="picture-card-s radius-0"
            :before-upload="beforeUploadPicture" name="files"
            v-loading="fileLoadingPicture"
            :data="token" :show-file-list="false" :on-success="handleUploadSuccessPicture">
              <img v-if="details.video.videoImg" :src="details.video.videoImg" width="70px" height="70px">
              <i v-else class="el-icon-plus"></i>
            </el-upload>
          </div>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<style lang="less" scoped>

</style>

<script>
  import elDragDialog from '@/directive/el-dragDialog'
  import { getStrByLength } from '@/utils'
  import { getToken } from '@/utils/auth'
  import { getQiniuToken } from '@/api/common/common'

  export default {
    components: {},
    directives: {
      // 拖动窗口
      elDragDialog
    },
    props: {
      details1: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        details: {
          detailsId: '',
          pageId: '',
          sortNo: 0,
          componentType: 0,
          backColor: '',
          propMap: {},
          goodsList: [],
          pictureList: [],
          buttonGroupList: [],
          title: {
            detailsId: '',
            titleId: '',
            backColor: '',
            textColor: '',
            textAlign: 'text-align-c',
            textSize: 16,
            title: '',
            textLink: ''
          },
          video: {
            videoId: '',
            detailsId: '',
            videoStyle: '1',
            videoImg: '',
            videoName: '',
            videoUrl: ''
          },
          audio: {
            audioId: '',
            detailsId: '',
            title: '',
            subtitle: '',
            loopPlayback: '0',
            autoPlayback: '0',
            autoDuration: ''
          },
          text: {
            textId: '',
            detailsId: '',
            content: '',
            textSize: '',
            textShape: '',
            textAlign: '',
            textColor: ''
          }
        },
        fileLoading: false,
        fileLoadingPicture: false,
        qiniuToken: {}
      }
    },
    // 初始化页面
    created() {
      const that = this
      this.resetDetails()
      this.details = this.details1
      this.details.video.videoStyle = this.details1.video.videoStyle.toString()
      this.token = { accessToken: getToken() }
      getQiniuToken().then(response => {
        if (response.isError) return
        that.qiniuToken = { token: response.data }
      })
      this.$bus.$on('resetDetailsVideo', function(details) {
        that.details = details
      })
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList)
      },
      handlePictureCardPreview(file) {
        console.log(file)
      },
      beforeUpload(file) {
        // const isAVI = file.type === 'video/avi'
        // const isMOV = file.type === 'video/quicktime'
        // const isRMVB = file.type === 'video/rmvb'
        // const isRM = file.type === 'video/rm'
        // const isFLV = file.type === 'video/flv'
        const isMP4 = file.type === 'video/mp4'
        // const is3GP = file.type === 'video/3gp'
        console.log(file)
        if (!isMP4) {
          this.$message.error('上传视频必须是MP4 格式!')
          this.fileLoading = false
          return
        }
        this.fileLoading = true
        return (isMP4)
      },
      handleUploadSuccess(res, file) {
        if (this.fileLoading) {
          if (!res.error) {
            this.fileLoading = false
            this.details.video.videoName = file.name
            this.details.video.videoUrl = this.getFileSpace() + '/' + res.key
            this.$bus.$emit('videoFormData', this.details)
          } else {
            this.$message.error('上传出错：' + res.error)
          }
        }
      },
      beforeUploadPicture(file) {
        const isJPG = file.type === 'image/jpeg'
        const isGIF = file.type === 'image/gif'
        const isPNG = file.type === 'image/png'
        const isBMP = file.type === 'image/bmp'

        if (!isJPG && !isGIF && !isPNG && !isBMP) {
          this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!')
          return
        }
        this.fileLoadingPicture = true
        return (isJPG || isBMP || isGIF || isPNG)
      },
      handleUploadSuccessPicture(res, file) {
        this.fileLoadingPicture = true
        if (res.code === 101) {
          this.fileLoadingPicture = false
          this.details.video.videoImg = res.data[0]
          this.$bus.$emit('videoFormData', this.details)
        }
      },
      getStrByLength(str, n) {
        return getStrByLength(str, n)
      },
      resetDetails() {
        this.details = {
          detailsId: '',
          pageId: '',
          sortNo: 0,
          componentType: 0,
          backColor: '',
          propMap: {},
          goodsList: [],
          pictureList: [],
          buttonGroupList: [],
          title: {
            detailsId: '',
            titleId: '',
            backColor: '',
            textColor: '',
            textAlign: 'text-align-c',
            textSize: 16,
            title: '',
            textLink: ''
          },
          video: {
            videoId: '',
            detailsId: '',
            videoStyle: '1',
            videoImg: '',
            videoName: '',
            videoUrl: ''
          },
          audio: {
            audioId: '',
            detailsId: '',
            title: '',
            subtitle: '',
            loopPlayback: '0',
            autoPlayback: '0',
            autoDuration: ''
          },
          text: {
            textId: '',
            detailsId: '',
            content: '',
            textSize: '',
            textShape: '',
            textAlign: '',
            textColor: ''
          }
        }
      }
    }
  }
</script>
